<template>
  <el-collapse-transition>
    <div v-show="show" class="open-param-page">
      <div class="title-area">
        <div class="allow-change">
          <span>是否允许用户修改参数值</span>
          <el-switch v-model="formData.isOpen" active-color="#13ce66" inactive-color="#BFBFBF" :width='50'></el-switch>
        </div>
        <div class="param-save">
          <el-button type="text" @click="saveParam">保存</el-button>
        </div>
      </div>
      <el-form v-if="formData.isOpen" label-position="top" :model="formData" :rules="rules" class="param-form" ref='form'>
        <el-form-item prop="description">
          <span slot="label">参数描述<span class="param-suffix">（可向车主描述该参数的用途）</span></span>
          <el-input v-model="formData.description" maxlength="100" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div class="color-block"></div>
    </div>
  </el-collapse-transition>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'

export default {
  name: 'ParamOpen',
  data() {
    return {
      formData: {
        isOpen: false,
        dataType: 'String',
        description: ''
      },
      rules: {
        description: [{ required: true, message: '请输入参数描述', trigger: 'blur' }]
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    openParam: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
  },
  computed: {
  },
  watch: {
    openParam(val) {
      if (val) {
        this.formData = deepClone(this.openParam)
      }
    }
  },
  methods: {
    saveParam() {
      if (this.formData.isOpen) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$emit('update:openParam', this.formData)
            this.$emit('update:show', false)
          }
        })
      } else {
        this.$emit('update:openParam', this.formData)
        this.$emit('update:show', false)
      }
    },
    resetForm() {
      this.formData = deepClone(this.openParam)
      this.$nextTick(() => {
        this.formData.isOpen && this.$refs.form.clearValidate()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.open-param-page{
  .title-area{
    background-color: #f2f3f5;
    padding: 20px 10px 10px;
    display: flex;
    .allow-change{
      flex: 1 0 auto;
      display: flex;
      span{
        margin-right: 10px;
      }
    }
    .param-save{
      .el-button{
        padding: 0;
        font-size: 14px;
        margin-top: 2px;
      }
    }
  }
  .param-form{
    background-color: #f2f3f5;
    padding: 0 10px 10px;
    .param-suffix{
      color: #C0C4CC;
    }
  }
  .color-block{
    background-color: #f2f3f5;
    height: 10px;
  }
}
</style>
<style lang="scss">
.open-param-page .title-area .allow-change .el-switch{
  .el-switch__core::before{
    display: flex;
    margin-top: -1px;
    content: 'OFF';
    color: #FFF;
    transform: scale(0.8, 0.8);
    margin-left: 17px;
  }
  &.is-checked .el-switch__core::before{
    content: 'ON';
    color: #FFF;
    margin-left: 0px;
  }
}
</style>
